<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<meta charset="utf-8" />
	<title>#{messages.appTitle}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Sistema de Gestión de Clientes" />
	<meta name="author" content="GreenSoft S.A." />
	<h:outputStylesheet name="bootstrap.css" library="css" />
	<style type="text/css">
		body {
			padding-top: 60px;
			padding-bottom: 40px;
		}
	</style>
	<h:outputStylesheet name="bootstrap-responsive.css" library="css" />	
	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]-->

	<!-- Le fav and touch icons -->
	<link rel="shortcut icon" href="resources/ico/favicon.ico" />
</h:head>
<h:body>
	<h:outputStylesheet name="style.css" library="css" />
	
<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#{request.contextPath}/index.jsf">#{messages.appName}</a>
          <h:form id="form-login-actions" style="margin: 0px;">
          <div class="btn-group pull-right">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="icon-user"></i> #{homeBean.nombreUsuario}
              <span class="caret"></span>
            </a>
	            <ul class="dropdown-menu">
	              <li>
              		<h:commandLink action="#{homeBean.showProfile}">
    	          		<i class="icon-edit"></i>
    	          		<h:outputText value=" #{messages.userProfile}" />
              		</h:commandLink>
	              </li>
	              <li class="divider"></li>
	              <li>
    	          	<h:commandLink action="#{homeBean.logout}">
    	          		<i class="icon-off"></i>
    	          		<h:outputText value=" #{messages.logout}" />
    	          	</h:commandLink>
	              </li>
	            </ul>
          </div>
          </h:form>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#{homeBean.home}">#{messages.homeText}</a></li>
              <li><a href="#{request.contextPath}/about.jsf">#{messages.aboutText}</a></li>
              <li><a href="#{request.contextPath}/contacto.jsf">#{messages.contactText}</a></li>
            </ul>
            <!-- Mensajes de error -->
          </div><!--/.nav-collapse -->
          <ui:include src="/WEB-INF/templates/show_error.xhtml"/>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <ui:insert name="breadcrumb"/>
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav" style="max-width: 340px; padding: 8px 0;">
          	<ui:insert name="menu"/>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <ui:insert name="content"/>
        </div><!--/span-->
      </div><!--/row-->

      <hr/>

      <footer>
        <p>#{messages.footerText}</p>
      </footer>

    </div><!--/.fluid-container-->
	<!-- /container -->
	
	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster --> 
	<script type="text/javascript" src="#{request.contextPath}/resources/js/jquery.js"></script>	
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-transition.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-alert.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-modal.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-dropdown.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-scrollspy.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-tab.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-tooltip.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-popover.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-button.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-collapse.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-carousel.js"></script>
	<script type="text/javascript" src="#{request.contextPath}/resources/js/bootstrap-typeahead.js"></script>
</h:body>
</html>